<template>
  <view class="item-style flex relative px-4 py-4 mb-3"
    @click="navigate(data.type ? `/package_square/pages/live/index?id=${props.data.id}` : `/package_square/pages/course/preview/detail?id=${props.data.id}`)">
    <u-image :src="data.cover_image" width="240" height="240" border-radius="12" />
    <view class="flex-1 flex flex-col justify-between ml-3 overflow-hidden">
      <view class="c-#333 text-28 text-maxline-2">{{ data.title || '' }}</view>
      <view>
        <scroll-view class="flex whitespace-nowrap w-370 mt-2" scroll-x enhanced :show-scrollbar="false">
          <view class="type-label-style" v-for="(item, index) in data.labels" :key="index">{{ item.category_name }}</view>
        </scroll-view>
        <view class="flex mt-3 c-#b5b5b5 text-24">
          <view class="flex-shrink-0 flex items-center">
            <u-icon name="clock" size="24" color="#b5b5b5" />
            <view class="ml-1.5">{{ data.type ? data.start_time : data.class_time }}</view>
          </view>
          <view v-if="data.address" class="flex-1 flex items-center ml-2">
            <u-icon name="map" size="24" color="#b5b5b5" />
            <view class="ml-1.5 text-maxline-1">{{ data.province_name || '-' }}·{{ data.city_name || '-' }}</view>
          </view>
        </view>
        <view class="flex mt-1.5 items-center">
          <view class="flex-1 c-#b5b5b5 text-24">{{ data.applicants_number || 0 }}人已报名</view>
          <view class="flex-shrink-0 button-sign"
            @click.stop="navigate(data.type ? `/package_square/pages/live/index?id=${props.data.id}` : `/package_square/pages/course/preview/appointment?id=${props.data.id}`)">
            {{ data.type ?  '去预约' : '立即报名' }}</view>
        </view>
      </view>
    </view>
    <view class="label-style flex-shrink-0">{{ data.type ? formatLiveStatus(data.live_status) : data.periods_number }}
    </view>
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';

const props = defineProps({
  data: Object,
})


function formatLiveStatus (status) {
  const statusList = {
    0: '预约中',
    1: '直播中',
    2: '已结束'
  }
  return statusList[status]
}
</script>
<style scoped>
.item-style {
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}


.label-style {
  position: absolute;
  z-index: 1000;
  height: 40rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx 0px 12rpx 0rpx;
  opacity: 1;
  background-color: #F4AF22;
}

.type-label-style {
  padding: 4rpx 12rpx;
  background-color: #e5e5e5;
  border-radius: 4rpx;
  color: #8c8c8c;
  font-size: 24rpx;
  display: inline-block;
  margin-right: 8rpx;
}

.button-sign {
  width: 152rpx;
  height: 48rpx;
  border-radius: 12rpx;
  background: linear-gradient(to top, rgba(244, 174, 32, 1) 0%, rgba(248, 220, 97, 1) 100%);
  color: #FFFFFF;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}</style>
